<template>
  <div id="container">
    <div class="banner">
    	<mt-swipe :auto="2000" :show-indicators="true">
			  <mt-swipe-item>
			  	<img src="http://www.dilidili.wang/uploads/allimg/180806/290_0139135761.jpg" alt="进击的巨人 第三季">
			  </mt-swipe-item>
			  <mt-swipe-item>
			  	<img src="http://www.dilidili.wang/uploads/allimg/180804/290_1729493491.jpg" alt="邪神与厨二病少女">
			  </mt-swipe-item>
			  <mt-swipe-item>
			  	<img src="http://www.dilidili.wang/uploads/allimg/180706/290_2025082031.jpg" alt="杀戮天使 第5话">
			  </mt-swipe-item>
			  <mt-swipe-item>
			    <img src="http://www.dilidili.wang/uploads/allimg/180710/290_2159073121.jpg" alt="Overlord第三季">
			  </mt-swipe-item>
			  <mt-swipe-item>
			  	<img src="http://www.dilidili.wang/uploads/allimg/180705/290_2155333491.jpg" alt="异世界魔王与召唤少女的奴隶魔术">
			  </mt-swipe-item>
			</mt-swipe>
    </div>
    <div class="list">
    	<ul>
    		<!--<router-link v-for="(v,i) in list" :key="i" tag="li" :to="{path:'/index',query:{id:v.id}}">{{v.cont}}</router-link>-->
    		<li v-for="(v,i) in list" @click="show=i">{{v.cont}}</li>
    	</ul>
    	<div class="sho" v-show="show==0">
    		<ul v-for="(v,i) in list[0].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    	<div class="sho" v-show="show==1">
    		<ul v-for="(v,i) in list[1].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    	<div class="sho" v-show="show==2">
    		<ul v-for="(v,i) in list[2].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    	<div class="sho" v-show="show==3">
    		<ul v-for="(v,i) in list[3].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	
    	</div>
    	<div class="sho" v-show="show==4">1
    		<ul v-for="(v,i) in list[4].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>	
    	</div>
    	<div class="sho" v-show="show==5">
    		<ul v-for="(v,i) in list[5].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    	<div class="sho" v-show="show==6">
    		<ul v-for="(v,i) in list[6].main">
    			<li>{{v.name}}</li>
    			<li>{{v.right}}</li>
    		</ul>
    	</div>
    </div>
    <div class="line"></div>
    <div class="main">
    	<ul>
    		<li><img src="../../img/评价.png"/></li>
    		<li>最近更新</li>
    		<li>补番刷一下</li>
    	</ul>
    	<div class="bottom">
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0159521171.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0124279921.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    	</div>
    </div>
    <div class="line"></div>
   <div class="main">
    	<ul>
    		<li><img src="../../img/评价.png"/></li>
    		<li>最近更新</li>
    		<li>补番刷一下</li>
    	</ul>
    	<div class="bottom">
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0159521171.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0124279921.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    		<dl>
    			<dt><img src="http://www.dilidili.wang/uploads/allimg/180807/290_0246135331.jpg"/></dt>
    			<dd><p>前进吧登山少女</p><p>更新到第六集</p></dd>
    		</dl>
    	</div>
    </div>
    <div class="audios">
    	<div class="a-left">
    		<p><img src="../../img/评价.png"/></p>
    		<p>音乐专区</p>
    	</div>
    	<div class="a-right">
    		<p class="more">更多</p>
    	   <p><img src="../../img/刷新.png"/></p>
    	</div>
    </div>
    <div class="raCont" >
    	  <dl v-for="(v,i) in lists" @click="index=i">
    	  	<dt><img :src=v.img></dt>
    	  	<dd @click="btns(i)">
    	  		<div>
    	  			<p class="ap" :class="{active:index==i}">{{v.name}}</p>
    	  			<p>{{v.p}}</p>
    	  		</div>
    	  		<img src="../../img/pause-1 (1).png" />
    	  		<audio :src=v.imgs class="audioss"></audio>
    	  	</dd>
    	  </dl>  	  
    </div>
    <div class="play">
    	<img src="../../img/pause-1 (1).png" @click="pause()"/>
      <img src="../../img/评价.png"/>
    	<div class="box">
    		<div class="box-inner" id="s" style="height: 100%; width:0px; background:blue; position: relative;">
    			<span class="clic"></span>
    		</div>
    	</div>
    </div>
    
   </div>
   
</template>

<script>
import { Swipe, SwipeItem } from 'mint-ui'
export default {
	 name: 'App',
	 data(){
	 	return{
	 		show:0,
	 		index:4,
	 		indexs:"",
	 		list:[
	 		{id:0,cont:"周一",main:[{name:"11111",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:1,cont:"周二",main:[{name:"11111111111",right:"11"},{name:"22222222222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:2,cont:"周三",main:[{name:"111111111111111",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:3,cont:"周四",main:[{name:"1111666661",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:4,cont:"周五",main:[{name:"1111111111111",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:5,cont:"周六",main:[{name:"111115555",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]},
	 		{id:6,cont:"周日",main:[{name:"1111177777",right:"11"},{name:"22222",right:"22"},{name:"33333",right:"33"},{name:"44444",right:"44"}]}
	 		],
	 		lists:[
	 		  {img:"http://a.hy233.tv/4edf7d4c-4bc2-4b70-8990-7e11cf6317a5?imageView2/1/w/40/h/40/q/100",name:"1111",p:"11",imgs:""},
	 		  {img:"http://a.hy233.tv/4edf7d4c-4bc2-4b70-8990-7e11cf6317a5?imageView2/1/w/40/h/40/q/100",name:"2222",p:"22",imgs:""},
	 		  {img:"http://a.hy233.tv/4edf7d4c-4bc2-4b70-8990-7e11cf6317a5?imageView2/1/w/40/h/40/q/100",name:"3333",p:"33",imgs:""}
	 		]
	 		
	 	}
	 },
	 methods:{
	  	pause:function(){
	  		var audioss = document.querySelectorAll(".audioss");
	  		for(var i = 0 ;i<audioss.length ;i++){
	  			audioss[i].pause()
	  		}
	  	},
	 	  btns:function(m){
	 	  	var audioss = document.querySelectorAll(".audioss");
	 	  	for(var i = 0 ; i < audioss.length ; i++ ){
	 	  		if(i==m){
	 	  			var audios = audioss[m];  			
	 	  			audios.play();
	 	  			audios.ontimeupdate = function(){
	 	  				 var time = this.currentTime*1 ;
               var all = this.duration*1 ;
               var mm = time / all *100 + "%" ;  
               s.style.width = mm ;
               console.log(s.style.width)
	 	  			}
	 	  		}else{
	 	  			audioss[i].pause()
	 	  		}
	 	  	}
          
	 	  }
	 },
	 	mounted(){
	 		  var qs = this.$route.query.id ;
	 		  this.qs =  qs
	 	}
}
</script>
<style scoped>
.banner{
	margin-top: 40px;
	height: 300px;
}
.banner img{
	width: 100%;
}
.list ul{
	display: flex;
}
.list ul li{
	flex: 1;
	text-align: center;
	line-height:40px ;
}
.sho ul li{
	height: 50px;
	border-top: 1px dashed #ccc;
}
.line{
	height: 15px;
	background: #F1F1F1;
}
.main ul{
	display: flex;
	height: 50px;
	align-items: center;
	font-family: "微软雅黑";
}
.main ul li:first-child{
	width: 10%;
	text-align: center;
}
.main ul li:first-child img{
	height: 20px;
}
.main ul li:nth-child(2){
	flex: 1;
	font-size: 20px;
}
.main ul li:last-child{
	width: 30%;
	text-align: center;
}
.bottom {
	display: flex;
	flex-wrap:wrap ;
	padding: 5px;
}
.bottom dl{
	width: 50%;
}
.bottom dl dt{
	padding: 8px;
}
.bottom dl img{
	width: 100%;
}
.audios{
	height: 50px;
	display:flex ;
	justify-content: space-between;	
	margin-top: 20px;
}
.audios img{
	height: 20px;	
	margin-top: 16px;
}
.a-left{
	display: flex;
	line-height: 50px;
	margin-left: 20px;
}
.a-left img{
	margin-right: 20px;
}
.a-left p{
	font-size: 25px;
	font-weight: bold;
}
.a-right{
	display: flex;
	line-height: 50px;
	margin-right: 20px;
}
.a-right img{
	margin-left: 20px;
}
.more{
	width: 50px;
	height: 30px;
	background: red;
	line-height: 50px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	margin-top: 10px;
}
.raCont{
	
}
.raCont dl{
	display: flex;
	height: 50px;
	margin-top: 10px;
}
.raCont dl dt{
	width: 10%;
}
.raCont dl dd{
	flex: 1;
	display: flex;
	justify-content: space-between;
	padding-right: 10px;
}
.raCont dl dd img{
	height: 20px;
	margin-top: 10px;
}
.active{
	color: red;
}
.play{
	display: flex;
	align-items: center;
	
}
.play img{
	height: 15px;
	margin-left: 20px;
}
.play {
	height: 50px;
	
}
.box{
	width: 70%;
	height: 5px;
  background: #ccc;
  margin-left: 20px; 
  }
.clic{
	width: 20px;
	height: 20px;
	border-radius: 100%;
	background: red;
	position: absolute;
	right:-10px;
	top: -7px;
}
</style>